
  <style>
    body {
      margin:0;
      padding:0;
      height: 100vh;
    }
    .chart {
      margin: .1rem .1rem;
      width: auto;
      height: 40vh;
    }
    #contentDiv{
      float: left;
      width: 100%;
      height: 250px;
      overflow: hidden;
      /* margin-top: 10px; */
    }

    #firstDiv{
      float: left;
      width: 360px;
      height: 250px;
    }

    #secondDiv{
      float: left;
      width: 360px;
      height: 250px;
      display: none;
    }

    #btnContent{
      width: 100%;
      float: left;
      height: 33px;
      display: none;
      margin-top: 5px;
    }

    #rightBtn{
      float: left;
      width: 126px;
      height: 33px;
      margin-left: 10%;
      border: none;
      font-size: 18px;
      color:#FFFFFF;
      background: url(./yujingbg.png) 0/126px 33px no-repeat ;
    }
    #leftBtn{
      float: left;
      width: 126px;
      height: 33px;
      margin-left: 10%;
      margin-right: 10%;
      border: none;
      font-size: 18px;
      color:#FFFFFF;
      background: url(./huise.png) 0/126px 33px no-repeat;
    }
  </style>


<div id="main">
  <div class="chart" id="chart1" style="width:360px;height:250px;"></div>
  <div style="text-align: center;"><span id="titleLable"></span></div>
  <div id="btnContent">
    <button id="rightBtn" type="button" onclick="clickRightItem()">预警</button>
    <button id="leftBtn" type="button" onclick="clickLeftItem()">预测</button>
  </div>
  <div class="div-inline" id="contentDiv">
    <div class="div-inline" id="firstDiv">
      <div class="chart hide" id="chart2" style="width:360px;height:250px;"></div>
    </div>
    <div class="div-inline" id="secondDiv">
      <div class="chart hide" id="chart3" style="width:360px;height:250px;"></div>
    </div>
  </div>
</div>

<script>
    var dictionary = {
        spi: "安全生产预警指数",
        spifor: "安全生产预测值",
        i1: "隐患风险",
        i2: "隐患级别",
        i3: "隐患整改率",
        i4: "未兑现培训",
        i5: "未兑现演练",
        i6: "事故级别",
        i7: "未参与度",
        i8: "排查偏差",
        i9: "自查自改率"
    };
    var dictionary2 = {
        spi: "安全生产预警指数",
        spifor: "安全生产预测值",
        i1GmYuce: "隐患风险",
        i2GmYuce: "隐患级别",
        i3GmYuce: "隐患整改率",
        i4GmYuce: "未兑现培训",
        i5GmYuce: "未兑现演练",
        i6GmYuce: "事故级别",
        i7GmYuce: "未参与度",
        i8GmYuce: "排查偏差",
        i9GmYuce: "自查自改率"
    };
    var config1,config2,config3;
    var chart1 = echarts.init(document.getElementById('chart1'));
    var chart2 = echarts.init(document.getElementById('chart2'));
    var chart3 = echarts.init(document.getElementById('chart3'));
    config1 = {

        grid:{
            top: "15%",
            height: "60%",
        },
        legend: {
            top: "6rem",
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#FFA27E'
                }
            }
        },
        yAxis: {
            type: 'value'
        },
        dataZoom: [{
            type: 'inside',
            start: 70,
            end: 100
        },{
            type: "slider",
            show: true,
            bottom: "5rem",
            handleSize: 30,
            start: 70,
            end: 100,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#ffffff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }]
    };

    chart1.setOption(config1);

    var tempWeeks=new Array();//记录所you星期的数组；
    var tempYears=new Array();//记录所有年份的数组；
    function loadChart1(args){
        chart1.hideLoading();
        var data = JSON.parse(args);
        chart1.setOption({
            legend: {
                data: ["安全生产预警指数","安全生产预测值"]
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data[0].week
            },
            series: [
                {
                    name: "安全生产预警指数",
                    type: "line",
                    data: data[0].spi
                },
                {
                    name: "安全生产预测值",
                    type: "line",
                    data: data[0].spifor
                }
            ]
        });
        tempWeeks=data[0].week;
        tempYears=data[0].year;
        var tempL=parseInt(tempWeeks.length)-2;
        initLoadChart2(tempYears[tempL],tempWeeks[tempL]);

    };
    config2 = {
        tooltip : {
            trigger: 'axis',
            formatter: "{b}",
            axisPointer : {
                type : 'shadow'
            }
        },
        xAxis: {
            type : 'value',
            position: 'top',
            splitLine: {lineStyle:{type:'dashed'}},
        },
        grid: {
            top: "11%",
            bottom: '1%'
        },
        yAxis: {
            type : 'category',
            axisLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false},
            splitLine: {show: false},
            data: ["隐患风险", "隐患级别", "隐患整改率", "未兑现培训", "未兑现演练", "事故级别", "未参与度", "排查偏差","自查自改率" ],
        },
        series: [{
            type:'bar',
            name: "表格2",
            radius: '100%',
            label: {
                normal: {
                    show: true,
                    position: "right",
                    formatter: function(params){
                        return params.data[1];
                    },
                    textStyle: {
                        color: '#2f4554',
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: function(params) {
                        if (params.dataIndex>4) {
                            return "#FFA500";
                        }else
                        {
                            return "#FFA500";
                        }
                    }
                }
            }
        }]

    };
    chart2.setOption(config2);
    function loadChart2(args){
        $("#chart2").show();
        var data = JSON.parse(args);
        var obj = data[0];
        var encodeData = [];
        for(p in obj){
            if(p.startsWith("i")){
                var item = [];
                var index = p.substring(1);
                //处理负数值（5、6、7、9）
                if(index > 4){
                    var temp = {};
                    temp.value = [obj[p],dictionary[p]];
                    temp.label = {
                        normal: {
                            show: true,
                            position: "right",
                            formatter: function(params){return params.data.value[1];},
                            textStyle: {
                                color: '#2f4554',
                            }
                        }
                    }
                    temp.itemStyle = {
                        normal: {
                            color: '#FFA500',
                        }
                    };
                    encodeData.push(temp);
                } else {
                    item.push(obj[p],dictionary[p]);
                    encodeData.push(item);
                }
            }
        }
        console.log(encodeData);
        typeof console && console.log(encodeData);
        chart2.setOption({
            series: [{
                data: encodeData,
            }]
        });
    }

    config3 = {
        tooltip : {
            trigger: 'axis',
            formatter: "{b}",
            axisPointer : {
                type : 'shadow'
            }
        },
        xAxis: {
            type : 'value',
            position: 'top',
            splitLine: {lineStyle:{type:'dashed'}},
        },
        grid: {
            top: "11%",
            bottom: '1%'
        },
        yAxis: {
            type : 'category',
            axisLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false},
            splitLine: {show: false},
            data: ["隐患风险", "隐患级别", "隐患整改率", "未兑现培训", "未兑现演练", "事故级别", "未参与度", "排查偏差","自查自改率" ],
        },
        series: [{
            type:'bar',
            name: "表格3",
            radius: '100%',
            label: {
                normal: {
                    show: true,
                    position: "right",
                    formatter: function(params){
                        return params.data[1];
                    },
                    textStyle: {
                        color: '#2f4554',
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: function(params) {
                        if (params.dataIndex>4) {
                            return "#0000FF";
                        }else
                        {
                            return "#0000FF";
                        }
                    }
                }
            }
        }]

    };
    chart3.setOption(config3);
    function loadChart3(args){
        $("#chart3").show();
        var data = JSON.parse(args);
        var obj = data[0];
        var encodeData = [];
        for(p in obj){
            if(p.startsWith("i")){
                var item = [];
                var index = p.substring(1);
                //处理负数值（5、6、7、9）
                if(index > 4){
                    var temp = {};
                    temp.value = [obj[p],dictionary2[p]];
                    temp.label = {
                        normal: {
                            show: true,
                            position: "right",
                            formatter: function(params){return params.data.value[1];},
                            textStyle: {
                                color: '#2f4554',
                            }
                        }
                    }
                    temp.itemStyle = {
                        normal: {
                            color: '#0000FF',
                        }
                    };
                    encodeData.push(temp);
                } else {
                    item.push(obj[p],dictionary2[p]);
                    encodeData.push(item);
                }
            }
        }
        console.log(encodeData);
        typeof console && console.log(encodeData);
        chart3.setOption({
            series: [{
                data: encodeData,
            }]
        });
    }


    $(function(){
        //chart1.showLoading();
        $("#chart2").hide();
        $("#chart3").hide();
        //loadChart1(data4chart1);
        //loadChart2(data4chart2);
        /* chart1.on('click', function (params) {
            typeof console && console.log(params.name);
            typeof Emp && Emp.execute("loadChart2('"+params.name+"')");
        });
        chart1.on('dblclick', function (params) {
            alert("dblclick")
        });
 */		chart1.on('mousedown', function (params) {
            //typeof console && console.log(params.name);
            typeof Emp && Emp.execute("loadChart2('"+params.name+"')");
            document.getElementById("titleLable").innerHTML=tempYears[indexOf(tempWeeks,params.name.toString())]+"年第"+params.name+"周";
        });
        /* chart1.on('mouseup', function (params) {
            alert("mouseup")
        });
        chart1.on('globalout', function (params) {
            alert("globalout")
        }); */

    });
    function hideChartAll(){
        $("#chart2").hide();
        $("#chart3").hide();
    }
    function hideChart2(){
        $("#chart2").hide();
    }
    function hideChart3(){
        $("#chart3").hide();
    }
    function initLoadChart2(year,week){
        document.getElementById("titleLable").innerHTML=year+"年第"+week+"周";
        Emp.execute("loadChartFist('"+week+"')");
    }
    function indexOf(arr,item){
        for( var i=0;i<arr.length;i++){
            if(arr[i]===item)
                return i;
        }
        return -1;
    }

    function showChangeTite(){
        document.getElementById("btnContent").style.display="inline";
    }
    function hidenChangeTite(){
        document.getElementById("btnContent").style.display="none";
    }
    function clickRightItem(){
        var firstD=document.getElementById("firstDiv");
        document.getElementById("firstDiv").style.display="inline";
        document.getElementById("rightBtn").style.background="url(./yujingbg.png) 0/126px 33px no-repeat";


        document.getElementById("secondDiv").style.display="none";
        document.getElementById("leftBtn").style.background="url(./huise.png) 0/126px 33px no-repeat";
    }
    function clickLeftItem(){

        document.getElementById("firstDiv").style.display="none";
        document.getElementById("rightBtn").style.background="url(./huise.png) 0/126px 33px no-repeat";


        document.getElementById("secondDiv").style.display="inline";
        document.getElementById("leftBtn").style.background="url(./yucebg.png) 0/126px 33px no-repeat";
    }
    function showFirstDiv(){
        document.getElementById("firstDiv").style.display="inline";
        document.getElementById("secondDiv").style.display="none";
    }
    function showSecondDiv(){
        document.getElementById("firstDiv").style.display="none";
        document.getElementById("secondDiv").style.display="inline";
    }
</script>
